// out: false, main: ../landing.styl

$bgpath = "../../assets/img/frontpage.jpg"

.welcome
  view-size 100 // custom
  background linear-gradient( alpha(#52ab39, 2/3), alpha(#52ab39, 0.75) ), url($bgpath)
  display grid
  grid-template-rows 11fr 1fr
  justify-content center
  // background-image url($bgpath)
  // .nav
  .main
    // border solid thin red
    display grid
    grid-template-areas "logo type" "logo motto" "logo starter"
    align-content center
    width 60vw

    &__logo
      area "logo"
      grid-row 1 / 4
      margin auto 0 0 0
      height 20vh

    &__type
      align-self: center;
      area "type"
      text $text $dark 5em bold
      line-height .75em

    &__motto
      align-self: center;
      area "motto"
      text $text white 2em 500
      line-height 1.5em

    &__starter
      grid "starter"
      align-self: center;
      corners $round
      width 45vw
      background-color white
      display grid
      grid-template-columns 6fr 2fr

      #search
        background-color inherit
        corners $round
        color $dark

      #start
        background-color $dark
        corners $round
        font-weight bold
        cursor pointer

      *
        font-size 14pt
        padding  5px 15px

  .more
    display grid
    grid-template-columns 1fr 1fr 1fr 1fr 1fr
    text-align center
    font-size 2em
    i
      padding: 10px
      cursor pointer
      // border medium #0000 solid
      border-radius 100%
      &:hover
        border medium white solid
